<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- //当前列表是循环出来，并且有事件需要传参 -->
        <li v-for="item in list">
          <input type="checkbox" v-model="item.check" />
          商品名称：{{item.name}} —— 商品价格：{{item.price}}——
          <button @click="del(item)">减</button>
          商品数量：{{item.count}}
          <button @click=" add(item)">加</button>—— 小计：{{item.count *
          item.price}}
        </li>
      </ul>
      <div>
        <p>总数量：{{allCount}}</p>
        <p>总计：{{allPrice}}</p>
        全选：<input type="checkbox" @change="changeFlag" v-model="allCheck" />
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            // allPrice: 0,
            // allCount: 0,
            allCheck:false,
            list: [
              {
                title: "华为",
                price: 100,
                count: 0,
                check: false,
              },
              {
                title: "华为",
                price: 100,
                count: 0,
                check: false,
              },
              {
                title: "华为",
                price: 100,
                count: 0,
                check: false,
              },
            ],
          };
        },
        //计算属性 缓存
        computed:{
          //总数量
          allCount(){
            return this.list.reduce((next, prev) => {
              //next 是上一次的return 结果
              //如果选中
              if (prev.check) {
                return (next += prev.count);
              }else{
                return next
              }
              
              //0 是初始next值
            }, 0);
          },
          //总价格 
          allPrice(){
            return this.allPrice = this.list.reduce((next, prev) => {
              //next 是上一次的return 结果
              if (prev.check) {
              return next += prev.count * prev.price;
              }else{
                return next
              }
              //0 是初始next值
            }, 0);
          }
        },
        //监听
        watch:{
          //监听引用类型
          list:{
            deep:true,
            //handler不写箭头函数,避免this
            handler(value){
               this.allCheck =value.every((item)=> item.check)
            }
          },
           //点击全选
          //  allCheck(newValue){
          //   this.list.forEach(item => {
          //     item.check = newValue
          //   });
          // },
        },
        methods: {
          add(item) {
            //数量加1
            item.count += 1;
      
          },
          del(item){
            // 数量减 1
            if(item.count > 0){
              item.count -= 1;
            }else{
              item.count = 0;
            }
          },
          //点击全选
          changFlag(newValue){
            this.list.forEach(item => {
              item.check = this.allCheck
            });
          },
        },
      });
    </script>
  </body>
</html>
